<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
            <title>Cindy JS</title>
            <script type="text/javascript" src="../build/js/Cindy.js"></script>
            </head>

	<body style="font-family:Arial;">

        <h1>Arrow Playground</h1>
<div  style="width:800px; line-height: 1.5">
</div>
        <script id='init' type='text/x-cindyscript'>
        drawarrow(a,b,col,alp):=(
	   draw(a,b,color->col,size->2,alpha->0.5, arrow->true, arrowshape->"full", arrowsides->"==>", arrowsize->1.5, arrowposition->1);
	   //draw(a,b,color->col,size->2,alpha->alp, arrow->true, alpha->0.5);
	   //draw(a,b,color->col,size->2,alpha->alp, arrow->true, arrowtype->"default");
	   //draw(a,b,color->col,size->2,alpha->alp, arrow->true, arrowtype->"full");

        );
        drawl(a,b,col,alp):=(
           draw(a,b,color->col,size->2,alpha->alp);

        );




        </script>

        <script id='csmove' type='text/x-cindyscript'>
        off=(.1,-.5);
        draw(line((0,1,0)),color->(0,0,0),size->0.5);
        draw(line((1,0,0)),color->(0,0,0),size->0.5);
        drawarrow(O,B,(0.0,0,0),1);
        drawarrow(O,C,(0.0,0,0),1);
        drawarrow(O,D,(0.0,0,0.9),1);
        off=(.1,.1);

	eps=0.0001;
	M=transpose([B.xy,C.xy]);
	Mfull = (|det(M)| > eps);
	if(Mfull, v=linearsolve(M, D.xy));

	lamB = v.x*B;
	drawarrow(O,lamB,(0,0,0,0),1);
	drawl(lamB,D,(0,0,0,0),1);
	drawtext(lamB-[0,0.5],"λp = " + format(v.x,2)+"p");

	lamC = v.y*C;
	drawarrow(O,lamC,(0,0,0,0),1);
	drawl(lamC,D,(0,0,0,0),1);
	drawtext(lamC-[2.5,0.5],"μq = " + format(v.y,2)+"q");

	Bzero = (|B| < eps);
	Czero = (|C| < eps);
	fullzero = (Bzero & Czero);
	if((!fullzero & !Mfull),
		if(Bzero,
			if(|C.x|>eps,v=[0,D.x/C.x],v=[0,D.y/C.y]),
			if(|B.x|>eps,v=[D.x/B.x,0],v=[D.y/B.y,0])

	));

	if(!fullzero,drawtext([-6,-5],"[λ, μ] = " + [format(v.x,2),format(v.y,2)]),drawtext([-6,-5], "[λ, μ] = [undefined, undefined]"));
	if(!fullzero,drawtext([-6,-6],"λ + μ = " + format(v.x+v.y,2)), drawtext([-6,-6],"λ + μ = undefined"));


        drawtext(B+off,"p");
        drawtext(C+off,"q");
        drawtext(D+off,"λp + μq");
//        drawarrow(E,F,(0.0,0,0),1);
draw(E,F,size->2,alpha->0.5, arrow->true, arrowshape->"full", arrowsides->"==>", arrowsize->2.5, arrowposition->1.2);

draw(G,H,size->2,alpha->0.5, arrow->true, arrowshape->"full", arrowsides->"<==>", arrowsize->1.5, arrowposition->0.6);

draw(I,J,size->2,alpha->0.5, arrow->true, arrowshape->"line", arrowsides->"<==>", arrowsize->0.7, arrowposition->0.2);
param = |X-Y|/6;
draw(K,L,size->2,alpha->0.5, arrow->true, arrowshape->"full", arrowsides->"<==>", arrowsize->1.5, arrowposition->param);
draw(L,J,size->2,alpha->0.1, arrow->true, arrowshape->"full", arrowsides->"<==>", arrowsize->param, arrowposition->0.8);
draw(H,K,size->2,alpha->0.5, arrow->true, arrowshape->"full", arrowsides->"==>", arrowposition->0.5, overhang->param);
        </script>



        <div style="position:relative">
        <div  id="CSCanvas" style="width:800px; height:500px; border:2px solid #000000; top:0px; left:0px;"></div>
</div>

        <script type="text/javascript">

            var gslp=[
                      {name:"O", type:"Free", pos:[0,0],color:[0,0,0],pinned:true,size:3},
                      {name:"B", type:"Free", pos:[9,1],color:[1,0,0],size:0.01},
                      {name:"C", type:"Free", pos:[-6,6],color:[1,0,0],size:0.01},
		      {name:"bc", type:"Join", args:["B","C"],color:[0,0,1]},
                      {name:"D", type:"PointOnLine", pos:[1,2],args:["bc"],color:[1,0,0],size:3},


                      {name:"E", type:"Free", pos:[-4,-2],color:[1,0,0],size:3},
                      {name:"F", type:"Free", pos:[2,-2],color:[1,0,0],size:3},
                      {name:"G", type:"Free", pos:[-4,-3],color:[1,0,0],size:3},
                      {name:"H", type:"Free", pos:[2,-3],color:[1,0,0],size:3},
                      {name:"I", type:"Free", pos:[-4,-4],color:[1,0,0],size:3},
                      {name:"J", type:"Free", pos:[2,-4],color:[1,0,0],size:3},
                      {name:"K", type:"Free", pos:[5,-2],color:[1,0,0],size:3},
                      {name:"L", type:"Free", pos:[5,-5],color:[1,0,0],size:3},

                      {name:"X", type:"Free", pos:[3,5],color:[1,0,0],size:3},
                      {name:"Y", type:"Free", pos:[9,5],color:[1,0,0],size:3},

                      {name:"XX", type:"Free", pos:[8,-5],color:[1,0,0],size:3},
                      {name:"YY", type:"Free", pos:[12,-5],color:[1,0,0],size:3},
		      {name:"GSLP", type:"Segment", args:["XX","YY"], arrow:true, arrowsides: "<==>", arrowshape: "full", arrowsize: 2, arrowposition: 0.8, color: [1,0,0],alpha:0.5 },

                      {name:"XX1", type:"Free", pos:[8,-6],color:[1,0,0],size:3},
                      {name:"YY1", type:"Free", pos:[12,-6],color:[1,0,0],size:3},
		      {name:"GSLP2", type:"Segment", args:["XX1","YY1"], arrow:true, arrowsides: "<==", arrowshape: "line", arrowsize: 3, arrowposition: 0.8, color: [0,1,0], },
                      {name:"XX2", type:"Free", pos:[8,-4],color:[1,0,0],size:3},
                      {name:"YY2", type:"Free", pos:[12,-4],color:[1,0,0],size:3},
		      {name:"GSLP3", type:"Segment", args:["XX2","YY2"], arrow:true, arrowsides: "<==", arrowshape: "empty", arrowsize: 3, arrowposition: 0.8, color: [1,0,1], },
                      {name:"XX3", type:"Free", pos:[8,-3],color:[1,0,0],size:3},
                      {name:"YY3", type:"Free", pos:[12,-3],color:[1,0,0],size:3},
		      {name:"GSLP4", type:"Segment", args:["XX3","YY3"], arrow:true, arrowsides: "<==", arrowshape: "jet", arrowsize: 3, arrowposition: 0.8, color: [0,0.8,0.8], },


                    ];
                     CindyJS({canvasname:"CSCanvas",
                        defaultAppearance: {dimDependent: 0.7},
                        movescript:"csmove",
                        initscript:"init",
                        geometry:gslp,
                        grid:1,
                        snap:true,
                        transform:[{scale:1.5},{translate:[0,0]}],
}
                        );

        </script>
<div  style="width:800px; line-height: 1.5">

</div>
<br>
<br>




	</body>
</html>
